<style scoped>
  .layout-assistant {
    margin: 0 auto;
    height: inherit;
    float: right;
  }

  .layout-content-main {
    padding: 10px;
    margin: 15px;
  }

  .layout-column {
    margin-top: 10px;
  }

  .card-img {
    display: block;
    margin: auto;
    width: 100%;
  }

  .card-name {
    font-weight: bold;
  }

  .card-price {
    font-size: xx-large;
    color: #2d8cf0;
    margin-top: 20px;
  }

  .load-more {
    display: block;
    margin: auto;
  }

  .add-success {
    color: #19be6b;
    text-align: center;
    font-size: xx-large;
    margin: 20px;
  }

</style>
<template>
  <div>
    <Layout ref="layout">
      <span slot="breadcrumb">商品列表</span>
      <Menu mode="horizontal" active-name="1" @on-select="sortGoods">
        <div class="layout-assistant">
          <MenuItem name="1">
            <Icon type="ios-arrow-thin-up"></Icon>
            正序排列
          </MenuItem>
          <MenuItem name="0">
            <Icon type="ios-arrow-thin-down"></Icon>
            逆序排列
          </MenuItem>
        </div>
      </Menu>

      <Row>
        <iCol span="4">
          <Menu active-name="all" width="auto" @on-select="setPriceFilter">
            <MenuGroup title="价格区间">
              <MenuItem name="all">
                All
              </MenuItem>
              <MenuItem name="0">
                0.00 - 100.00
              </MenuItem>
              <MenuItem name="1">
                100.00 - 500.00
              </MenuItem>
              <MenuItem name="2">
                500.00 - 1000.00
              </MenuItem>
              <MenuItem name="3">
                1000.00 - 2000.00
              </MenuItem>
            </MenuGroup>
          </Menu>
        </iCol>
        <iCol span="20">
          <Row :gutter="16" class="layout-content-main">
            <iCol span="4" class="layout-column" v-for="(item,index) in goodList" :key="item.productId">
              <Card>
                <a href="#">
                  <img class="card-img" v-lazy="'/static/'+item.productImage" alt="">
                </a>
                <div class="card-name">{{item.productName}}</div>
                <div class="card-price">{{item.salePrice | currency }}</div>
                <Button type="primary" shape="circle" icon="" size="large" icon="ios-cart" long
                        @click="addCart(item.productId)">加入购物车
                </Button>
              </Card>
            </iCol>
          </Row>
        </iCol>
      </Row>
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <img class='load-more' src="/static/loading-svg/loading-spinning-bubbles.svg" v-show="loading">
      </div>
    </Layout>
    <Modal v-model="addCartSuccessModal" width="360">
      <div class="add-success">
        <Icon type="android-cart"></Icon>
        <span>加入购物车成功</span>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" icon="ios-cart" @click="gotoCart">查看购物车</Button>
        <Button type="ghost" size="large" @click="addCartSuccessModal = false">继续购物</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import Layout from '@/components/Layout.vue'
  import axios from 'axios'

  export default {
    data() {
      return {
        goodList: [],
        priceLevel: null,
        sortFlag: 1,
        page: 1,
        pageSize: 12,
        busy: true,
        loading: false,
        addCartSuccessModal: false,
      }
    },
    components: {
      Layout
    },
    mounted() {
      this.getGoodList();
    },
    methods: {
      getGoodList(isLoadMore) {
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          sort: this.sortFlag,
          priceLevel: this.priceLevel
        };
        this.loading = true;
        axios.get("/goods", {
          params: param
        }).then((result) => {
          this.loading = false;
          let res = result.data;
          if (res.code === 200) {
            if (isLoadMore) {
              this.goodList = this.goodList.concat(res.data.list);
            } else {
              this.goodList = res.data.list;
              this.busy = false;
            }
            if (res.data.count < this.pageSize) {
              this.busy = true;
            } else {
              this.busy = false;
            }
          }
          else {
            this.goodList = [];
          }
        });
      },
      loadMore() {
        this.busy = true;
        setTimeout(() => {
          this.page++;
          this.getGoodList(true);
        }, 500);
      },
      sortGoods(sortFlag) {
        this.sortFlag = sortFlag;
        this.page = 1;
        this.getGoodList();
      },
      setPriceFilter(priceLevel) {
        if (priceLevel == 'all') {
          this.priceLevel = null;
        } else {
          this.priceLevel = priceLevel;
        }
        this.page = 1;
        this.getGoodList();
      },
      addCart(productId) {
        if (this.$store.state.userName === null) {
          this.$Modal.warning({
            title: "未登录",
            content: '请先登录，否则无法加入购物车'
          });
          return;
        }
        axios.post(
          "/user/cart/" + productId, null,
          {
            headers: {
              Authorization: this.$store.state.token
            }
          }
        ).then((result) => {
          let res = result.data;
          if (res.code === 200) {
            this.addCartSuccessModal = true;
          } else {
            this.$Modal.warning({
              title: "未登录",
              content: '请先登录，否则无法加入购物车'
            });
            this.$refs["layout"].logout();
          }
        });
      },
      gotoCart() {
        this.$router.push("cart");
      }
    }
  }
</script>
